import Vue from 'vue'
import Vuex from 'vuex'
// 导入城市区数据
import areaData from '../utils/area'
// token工具函数
import { getToken } from '../utils/local'
// api
import { getUserInfo } from '../api/user'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 登录状态 未登录
    isLogin: false,
    // 用户信息
    // 花姐的写法
    userInfo: ''
    // 直接写好格式,但是不符值
    // 不好用 userInfo来作为判断依据了
    // userInfo: {
    //   correntArticles: []
    // }
  },
  mutations: {
    // 修改用户信息
    SETUSERINFO (state, newUserInfo) {
      state.userInfo = newUserInfo
    },
    // 修改登录状态
    SETISLOGIN (state, newIsLogin) {
      state.isLogin = newIsLogin
    },
    // 修改指定的属性
    // SETPROPVALUE (state, option) {
    // console.log(option)
    SETPROPVALUE (state, { propName, propValue }) {
      console.log('propName:', propName)
      console.log('propValue:', propValue)
      /*
      数据格式
        {
          propName:"gender",
          propValue:1
        }
      */
      // 如果不用解构 可以直接通过 点语法获取属性
      // state.userInfo[option.propName] = option.propValue

      // 结合解构 直接可以使用propName, propValue
      state.userInfo[propName] = propValue
    }
  },
  // 仓库的计算属性
  getters: {
    // 获取性别
    userGender (state) {
      const genderObj = { 0: '未知', 1: '男', 2: '女' }
      // 对象取值的语法
      // return genderObj[1]
      return genderObj[state.userInfo.gender]
    },
    // 用户的城市信息
    userArea (state) {
      return areaData.city_list[state.userInfo.area]
    }
  },
  // 包装异步的操作
  actions: {
    // 获取用户信息
    async getUserInfo ({ commit }) {
      if (getToken()) {
        // 调用接口
        const res = await getUserInfo()
        // 成功
        // 仓库保存数据
        // 处理用户头像
        res.data.avatar = process.env.VUE_APP_URL + res.data.avatar
        // vuex中保存用户信息
        commit('SETUSERINFO', res.data)
        // vuex中保存登录状态
        commit('SETISLOGIN', true)
      }
    }
  },
  modules: {}
})
